<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>黑马面面</title>
    <meta name="description" content="黑马面面">
    <meta name="keywords" content="黑马面面">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/element-ui.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>

<body class="hold-transition skin-purple sidebar-mini">
<div id="app">
    <el-container>
        <!--头部-->
        <el-header class="main-header" style="height:70px;">
            <nav class="navbar navbar-static-top" :class=''>
                <!-- Logo -->
                <a href="#" class="logo" style="text-align:center">
                    <span class="logo-mini" v-show='isCollapse'><img src="../img/minilogo_new.png"></span>
                    <span class="logo-lg" v-show='!isCollapse'><img src="../img/logo_new.png"></span>
                </a>
                <!--弹出收回按钮-->
                <a href="#" class="sidebar-toggle" @click="isClossTabFun">
                    <i aria-hidden="true"
                       :class="isCollapse?'fa fa-indent':'fa fa-outdent'"></i>
                </a>
                <!--人头下拉栏-->
                <div class="right-menu">
                    <el-dropdown class="avatar-container right-menu-item" trigger="click">
                        <div class="avatar-wrapper">
                            <img src="../img/avatar5.png" class="user-avatar">
                            &nbsp;{{userName}}
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item divided>
                                <span style="display:block;" @click="handleUptPwd()">修改密码</span>
                            </el-dropdown-item>
                            <el-dropdown-item divided>
                                <span style="display:block;"><a href="#" @click="logout()">退出</a></span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </nav>
        </el-header>
        <!--中部-->
        <el-container>
            <!--左边-->
            <el-aside :width="tabWidth+'px'">
                <el-menu default-active="5-1" class="el-menu-vertical-demo" background-color="#108ee9"
                         @open="handleOpen"
                         @close="handleClose"
                         :collapse="isCollapse">
                    <sidebar-item v-for="menu in menuList" :key="menu.path" :item="menu"/>
                </el-menu>
            </el-aside>
            <!--右边-->
            <el-container>
                <iframe name="right" id="iframepage" class="el-main"
                        src="../index.html" width="100%" height="100%" frameborder="0" ranat="server"></iframe>
            </el-container>
        </el-container>
    </el-container>
    <!--修改密码弹窗-->
    <el-dialog title="修改密码" align="center" :visible.sync="dialogpwdVisible" width="40%" top="8vh">
        <el-form label-width="120px" :model="uptForm" :rules="uptRules" ref="uptForm">

            <el-form-item label="旧密码：" prop="pwd">
                <el-input type="password" v-model="uptForm.pwd" autocomplete="off" show-password></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="newpwd">
                <el-input type="password" v-model="uptForm.newpwd" autocomplete="off" show-password></el-input>
            </el-form-item>
            <el-form-item label="重复密码：" prop="rePwd">
                <el-input type="password" v-model="uptForm.rePwd" autocomplete="off" show-password></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleUptCancel">取 消</el-button>
            <el-button type="primary" @click="handleUptConfirm">确 定</el-button>
        </div>
    </el-dialog>

</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../js/element-ui.js"></script>
<script src="../plugins/jquery/dist/jquery.js"></script>
<script src="../js/menu-adm.js"></script>
<script src="../js/base.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    Vue.component('sidebar-item', {
        props: {
            item: {
                type: Object,
                required: true
            }
        },
        template: `
            <div v-if="item.children">
                <template v-if="item.children.length == 0">
                    <el-menu-item :index="item.path">
                        <img :src="item.icon">&nbsp;&nbsp;
                        {{item.title}}
                    </el-menu-item>
                </template>

                <el-submenu v-else :index="item.path">
                    <template slot="title">
                        <img :src="item.icon">&nbsp;&nbsp;
                        {{item.title}}
                    </template>

                    <template v-for="child in item.children">
                        <sidebar-item
                                v-if="child.children&&child.children.length>0"
                                :item="child"
                                :key="child.path"/>
                        <el-menu-item v-else :key="child.path" :index="child.path" style='padding-left:53px'>
                            <a :href="child.linkUrl" target="right">{{child.title}}</a>
                        </el-menu-item>
                    </template>
                </el-submenu>
            </div>`
    })
    new Vue({
        el: '#app',
        // router,
        data() {//密码校验规则
            var uptValidatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else if(value === this.uptForm.pwd){
                    callback(new Error('不能与旧密码一致'));
                } else
                {
                    if (this.uptForm.newpwd !== '') {
                        this.$refs.uptForm.validateField('rePwd');
                    }
                    callback();
                }
            };
            //重复密码校验规则
            var uptValidateCheckPass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.uptForm.newpwd) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                /*修改密码*/
                uptRules: {
                    newpwd: [
                        {validator: uptValidatePass, trigger: 'blur'}
                    ],
                    rePwd: [
                        {validator: uptValidateCheckPass, trigger: 'blur'}
                    ]
                },
                uptForm: {
                    pwd: '',
                    newpwd: '',
                    rePwd: '',

                },
                dialogpwdVisible: false,
                userName: sessionStorage.getItem("userName"),
                visible: false,
                isCollapse: false,
                tabWidth: 200,
                test1: 1,
                intelval: null,
                winfo: 'winfo',
                data: [],
                menuList: [],
                input: ''
            }
        },
        created() {


            this.menuList = nemu.data
            if (this.userName != 'admin') {
                this.menuList.shift();
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                // console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                // console.log(key, keyPath);
            },
            // 修改密码
            handleUptPwd() {
                if (this.$refs['form']) {
                    this.$refs['form'].resetFields();
                }

                this.dialogpwdVisible = true;
            },
            //修改密码确定
            handleUptConfirm() {
                var t = this;
                alert(this.newpwd);
                this.$refs['form'].validate((valid) => {
                    if (valid) {

                    }
                });
            },
            //修改密码取消
            handleUptCancel() {
                this.dialogpwdVisible = false;
            },
            logout() {
                console.log("退出");
                axios.get('/user/logout.do').then(response => {
                    if (response.data.flag) {
                        //退出成功
                        //1.清除前端保存的userName
                        sessionStorage.removeItem("userName");
                        //2.跳转到登录页面
                        window.location.href = "../index.html";
                    } else {
                        this.$message.error(response.data.message);
                    }
                });
            },
            isClossTabFun() {
                if (!this.isCollapse) {
                    this.tabWidth = 48;
                } else {
                    this.tabWidth = 200;
                }
                this.isCollapse = !this.isCollapse;
            }
        }
    })
</script>
</html>